<template>
  <div class="recomment">
  <div class="comment_hd">热销推荐</div>
  <ul>
    <li v-for="(item,index) in list" :key="index" class="item_list border-bottom">
      <img :src="item.imgUrl
" alt="">
      <div class="rigbox">
        <p>{{item.title}}</p>
        <p>{{item.desc}}</p>
        <button class="detail_btn">查看详情</button>
      </div>
    </li>
  </ul>
  </div>
</template>

<script>
export default {
  name: "recommend",
  props: {
    list: {
      type: Array,
      default: {
        return: []
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.comment_hd {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  background: #f3f3f3;
  padding: 0 0.2rem;
  box-sizing: border-box;
}

.item_list {
  display: flex;

  img {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0.1rem;
  }
}

.rigbox {
  flex: 1;
  padding: 0.1rem;
}

.detail_btn {
  padding: 0.1rem 0.2rem;
  box-sizing: border-box;
  background: #ffbe0c;
  border-radius: 4px;
  margin-top: 10px;
  float: right;
}
</style>